import { UnderlineIcon } from 'lucide-react';
import { useEditorStore } from '@/store/useEditorZustand';
import { Button } from 'antd';

import cx from 'classnames';

export default function UnderlineButton() {
  const { editor } = useEditorStore();

  const hanlerClick = () => {
    editor?.chain().focus().toggleUnderline().run();
  };
  const isActive = !!editor?.getAttributes('textStyle').textDecoration;

  return (
    <Button
      icon={<UnderlineIcon className={cx('size-4')} />}
      type={!isActive ? 'text' : 'link'}
      onClick={hanlerClick}
    />
  );
}
